<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.input绑定输入框 -->
        <h3>input输入框</h3>
        <label for="kd">快递查询:
            <input type="text" id="kd" placeholder="请输入快递单号" v-model.lazy='message'>
        </label>
        <span>查询快递单号:{{message}}</span> <br />

        <!-- 2.radio单选框 raido使用了双向绑定，则不需要为两者指定互斥属性name, 但需要指定value-->
        <h3>radio单选框</h3>
        <span>性别:</span>
        <label v-for='item in originSex' :for="item">
            <input type="radio" :value='item' :id='item'  v-model='sex'>{{item}}
        </label>
        <span>您的性别为: {{sex}}</span> <br />

        <!-- 3.checkbox复选框 跟radio一样不需要指定name，但需要指定value -->
        <h3>checkbox复选框</h3>
        <span>是否同意协议:</span>
        <label for="argee">
            <input type="checkbox" id="argee" v-model='isArgee'>同意
            <span>您的选择是: {{isArgee}}</span>
            <button :disabled='!isArgee' @click='btn()'>下一步</button>
        </label> <br />

        <span>兴趣爱好:</span>
         <!-- 动态值绑定 -->
         <label v-for='item in originLove' :for='item'>
             <input type="checkbox" :value = 'item' :id='item' v-model="love">{{item}}
         </label>
        <span>你的爱好为: {{love}}</span> <br>

        <!-- 4.select的使用 -->
        <h3>select选项</h3>
        <span>地区:</span>
        <select v-model='city'>
            <option value="--请选择--">请选择</option>
            <option v-for='item in originCity' :value="item">{{item}}</option>
        </select>
        <span>您所在的城市为: {{city}}</span> <br>

        <span>歌手:</span>
        <select v-model='musics' multiple>
            <option v-for="item in originMusics" :value='item'>{{item}}</option>
        </select>
        <span>您喜欢的歌手: {{musics}}</span> <br>

    </div>
    <script src='../js/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '',
                originSex:['男','女'],
                sex: '',
                isArgee: false,
                originLove: ['读书','书法', '唱歌','跳舞','打游戏'],
                love:[],
                originCity : ['北京', '上海', '重庆', '广州'],
                city:'--请选择--',
                originMusics:['陈奕迅','张杰', '周杰伦', '许嵩'],
                musics:[]
            },
            methods: {
              
            }
        })
    </script>
</body>

</html>